<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>01layout 布局</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>

<script type="text/javascript">
	$(function() {
		$("#grid").datagrid({
			columns:[[
			          {field:'id',title:'编号',checkbox:true},
			          {field:'name',title:'姓名'},
			          {field:'age',title:'年龄'}
			          ]],
			 usl:'',   // 指定一个路劲 datagrid 向这个路劲发送ajax请求 获的 json 数据
			 pagination:true,  //显示分页
			 singleSelect:false, // 是否单选
			 rownumbers:true,  // 显示行号
			 toolbar:[
			          {text:'添加',iconCls:'icon-add',handler:function(){
			        	  alert("添加操作");
			          }},
			          {text:'删除',iconCls:'icon-remove'},
			          {text:'修改',iconCls:'icon-edit'}
			          ]
		});
	});

</script>

</head>
<body>
	<h3>将静态HTML代码 渲染为datagrid</h3>
	<table id="grid"></table>
</body>
</html>